<template>
  <view class="appointment bg-nav-bar-3">
    <NavBar showBack title="预约"></NavBar>
    <ProgressBar :activeSetp="activeSetp" :setpList="setpList"></ProgressBar>
    <view class="appointment-content">
      <ImgIcon :class="`step-car stepcar-${activeSetp}`" size="128*52" src="static/icons/icon-car.png"></ImgIcon>
      <StepType v-if="activeSetp === 1" v-model:value="paramsRef" v-model:carinfo="carInfo" v-model:shopinfo="shopInfo">
      </StepType>
      <StepUser v-if="activeSetp === 2" v-model:value="paramsRef"></StepUser>
      <StepAffirm v-if="activeSetp === 3" v-model:value="paramsRef" :carinfo="carInfo" :shopinfo="shopInfo"></StepAffirm>
      <StepSubmit v-if="activeSetp === 4" :appointid="appointInfo?.appoint_log_id" :params="paramsRef" :carinfo="carInfo"
        :shopinfo="shopInfo"></StepSubmit>
    </view>
  </view>
  <view class="bottom-btn">
    <!-- <view class="btn" @click="onNext(-1)">上一步</view> -->
    <view class="btn" v-if="activeSetp === 1 || activeSetp === 2" @click="onNext(1)">下一步</view>
    <view class="btn" v-if="activeSetp === 3" @click="onSubmit">提交</view>
    <!-- <view class="btn" v-if="activeSetp === 4" @click="onDaohang">一键导航</view> -->
  </view>
</template>


<script setup>
import ImgIcon from "@/components/ui/img-icon"
import { ref, watch, onMounted } from "vue"
import NavBar from "@/components/ui/nav-bar"
import ProgressBar from "./com/progress-bar"
import StepType from "./com/step-type"
import StepUser from "./com/step-user"
import StepAffirm from "./com/step-affirm"
import StepSubmit from "./com/step-submit"
import service from "@/path/service"
import { router } from "@/path/router";
import { useUserInfoStore } from '@/path/store/userInfo';
const userStore = useUserInfoStore()


const activeSetp = ref(1)
const setpList = [
  { setp: 1, title: "预约类型" },
  { setp: 2, title: "用户信息" },
  { setp: 3, title: "提交信息" },
  // { setp: 4, title: "导航" },
]
const carInfo = ref({})
const shopInfo = ref({})
const appointInfo = ref({})
const paramsRef = ref({
  /**预约类目：maintenance：保养，other：其他 */
  appointType: "maintenance",
  /**预约时间 */
  appointTime: "",
  /**行驶里程 */
  usedKm: "",
  /**店铺id */
  shopId: "",
  /**车驾号 */
  carFrameNumber: "",
  contactPerson: ""
})
onMounted(() => {
  const routerData = router.getData()
  if (routerData?.carFrameNumber) {
    paramsRef.value.carFrameNumber = routerData?.carFrameNumber
  }
})
watch(() => userStore.userInfo, () => {
  paramsRef.value = {
    ...paramsRef.value,
    /**联系电话 */
    phone: userStore.userInfo.mobile,
    /**联系人 */
    contactPerson: '',
  }
}, { immediate: true })
function onNext(_step = 1) {
  if (activeSetp.value === 1 && !paramsRef.value.shopId) {
    uni.showToast({
      title: "请选择服务门店",
      icon: "none"
    })
    return
  }
  if (activeSetp.value === 1 && !paramsRef.value.carFrameNumber) {
    uni.showToast({
      title: "请选择车辆",
      icon: "none"
    })
    return
  }
  if (activeSetp.value === 1 && !paramsRef.value.appointTime) {
    uni.showToast({
      title: "请选择到店时间",
      icon: "none"
    })
    return
  }
  if (activeSetp.value === 2 && !paramsRef.value.usedKm) {
    uni.showToast({
      title: "请选择行驶里程",
      icon: "none"
    })
    return
  }
  const nowStepIdx = setpList.findIndex(v => v.setp === activeSetp.value)
  activeSetp.value = setpList[nowStepIdx + _step].setp
}
function onDaohang() {
  uni.openLocation({
    latitude: shopInfo.value.lat,
    longitude: shopInfo.value.lng,
    name: shopInfo.value.name,
    address: shopInfo.value.address,
  })
}

function onSubmit() {
  service.post("api/ycg/usercenter/appoint", {
    ...paramsRef.value,
  }).then(res => {
    appointInfo.value = res
    uni.showModal({
      title: "温馨提示",
      content: "恭喜您预约成功",
      confirmText: "查看",
      cancelText: "返回",
      success(res) {
        if (res.confirm) {
          router.navigate({ url: "/pages/mine/appointment-log/index" })
        } else {
          router.back()
        }
      }
    })
  })
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>

